<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pink老师冰墩墩</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    html {
      width: 100%;
      height: 100%;
    }

    body {
      font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
      background-image: linear-gradient(#0ac2f3, #e4f3f6);
      color: #000;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    /* 冰墩墩开始 */
    .bingdundun {
      position: absolute;
      left: 35%;
      top: 100px;
    }

    .m_body {
      width: 362px;
      height: 410px;
      border: #393939 8px solid;
      margin: 50px auto;
      border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
      position: absolute;
      left: 109px;
      top: -30px;
      background: #fff;
    }

    .ear1,
    .ear2 {
      background: #393939;
      width: 81px;
      height: 115px;
      border-radius: 50%;
      position: absolute;
      z-index: -1;
    }

    .ear1 {
      left: 150px;
      top: 26px;
      transform: rotate(-10deg);
    }

    .ear2 {
      left: 362px;
      top: 28px;
      transform: rotate(10deg);
    }

    .eye1,
    .eye2 {
      background: #393939;
      width: 83px;
      height: 115px;
      border-radius: 50%;
      position: absolute;
    }

    .eye1 {
      left: 185px;
      top: 122px;
      transform: rotate(45deg);
    }

    .eye2 {
      left: 329px;
      top: 122px;
      transform: rotate(-45deg);
    }

    .eye1:before,
    .eye2:before {
      content: "";
      width: 40px;
      height: 40px;
      border: #fff 5px solid;
      border-radius: 100%;
      position: absolute;
    }

    .eye1:before {
      right: 10px;
      top: 22px;
    }

    .eye2:before {
      left: 10px;
      top: 22px;
    }

    .eye1:after,
    .eye2:after {
      content: "";
      width: 10px;
      height: 10px;
      background: #fff;
      border-radius: 100%;
      position: absolute;
    }

    .eye1:after {
      right: 27px;
      top: 31px;
    }

    .eye2:after {
      left: 41px;
      top: 44px;
    }

    .face {
      position: absolute;
      border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
    }

    .c_blue {
      border: #6bcdf3 5px solid;
      width: 280px;
      height: 224px;
      left: 150px;
      top: 78px;
    }

    .c_red {
      border: #af2350 5px solid;
      width: 287px;
      height: 233px;
      left: 146px;
      top: 73px;
    }

    .c_purple {
      border: #5d75b3 5px solid;
      width: 295px;
      height: 240px;
      left: 142px;
      top: 70px;
    }

    .c_yellow {
      border: #ffc346 5px solid;
      width: 305px;
      height: 248px;
      left: 137px;
      top: 65px;
    }

    .c_green {
      border: #7fcb58 5px solid;
      width: 313px;
      height: 256px;
      left: 133px;
      top: 61px;
    }

    .arm1,
    .arm2 {
      background: #333;
      position: absolute;
      z-index: -1;
    }

    .arm1 {
      width: 75px;
      height: 118px;
      left: 64px;
      top: 244px;
      transform: rotate(45deg);
      border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
    }

    .arm2 {
      width: 75px;
      height: 148px;
      left: 441px;
      top: 80px;
      transform: rotate(37deg);
      border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
      animation: move 1s infinite alternate;
      transform-origin: left bottom;
    }

    @keyframes move {
      form {
        transform: rotate(27deg);
      }

      to {
        transform: rotate(67deg);
      }
    }

    .arm2:before {
      content: "";
      width: 16px;
      height: 24px;
      background: #bc242c;
      position: absolute;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(45deg);
      left: 32px;
      top: 20px;
    }

    .arm2:after {
      content: "";
      width: 16px;
      height: 24px;
      background: #bc242c;
      position: absolute;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(-45deg);
      left: 26px;
      top: 20px;
    }

    .arm_c {
      content: "";
      width: 16px;
      height: 24px;
      position: absolute;
      left: 426px;
      top: 20px;
    }

    .nose {
      background-color: #333333;
    }

    .nose:before,
    .nose:after {
      content: '';
      position: absolute;
      background-color: inherit;
    }

    .nose,
    .nose:before,
    .nose:after {
      width: 28px;
      height: 18px;
      border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
    }

    .nose {
      position: absolute;
      left: 284px;
      top: 187px;
    }

    .mouse {

      position: absolute;
      left: 259px;
      top: 219px;
      width: 78px;
      height: 60px;
      border-radius: 50%;
      border-left: 0;
      border-right: 0;
      background: #393939;
    }

    .mouse::before {
      content: '';
      position: absolute;
      width: 40px;
      height: 25px;
      background-color: #fff;
      border-radius: 50%;
      left: 18px;
      top: -11px;
    }

    .mouse::after {
      content: '';
      position: absolute;
      width: 52px;
      height: 32px;
      background-color: #bc242c;
      border-radius: 50%;
      left: 14px;
      top: 25px;
    }

    .leg1,
    .leg2 {
      background: #333;
      position: absolute;
      width: 83px;
      height: 80px;
      border-radius: 0 0 30px 30px;
      z-index: -1;
    }

    .leg1 {
      left: 187px;
      top: 423px;
    }

    .leg2 {
      left: 328px;
      top: 423px;
    }

    .leg1:after,
    .leg2:after {
      content: "";
      width: 43px;
      height: 30px;
      position: absolute;
      background: #363636;
      border-radius: 30px;
    }

    .leg1:after {
      bottom: 0;
      right: -3px;
    }

    .leg2:after {
      bottom: 0;
      left: -3px;
    }

    .m_body img {
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translate(-50%);
      width: 120px;
    }
  </style>
</head>

<body>
  <div class="bingdundun">
    <div class="m_body">
      <!-- 这里冬奥会图标也可以css写比较繁琐，这里直接用图片啦 -->
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F46657c5164a1637f8b015ff44be27a020345311d25243-5BjOfc_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647052580&t=9841b8371651dd08d9e9eb09b913f78e"
        alt="">
    </div>
    <div class="ear1"></div>
    <div class="ear2"></div>
    <div class="eye1"></div>
    <div class="eye2"></div>
    <div class="face c_blue"></div>
    <div class="face c_red"></div>
    <div class="face c_purple"></div>
    <div class="face c_yellow"></div>
    <div class="face c_green"></div>
    <div class="nose"></div>
    <div class="mouse"></div>
    <div class="arm1"></div>
    <div class="arm2"></div>
    <div class="leg1"></div>
    <div class="leg2"></div>
  </div>
  <div id="snow"></div>
  <script>
    function Obj() { }  // 创建构造函数

    /*为这个构造函数挂载一个具有一个参数的原型方法*/
    Obj.prototype.draw = function (o) {
      let speed = 0   //雪花每次下落的数值（10px）
      let startPosLeft = Math.ceil(Math.random() * document.documentElement.clientWidth)//设置雪花随机的开始x值的大小
      o.style.opacity = (Math.ceil(Math.random() * 3) + 7) / 10  //设置透明度
      o.style.left = startPosLeft + 'px'
      o.style.color = "#fff"
      o.style.fontSize = 12 + Math.ceil(Math.random() * 14) + 'px'
      setInterval(function () {
        //雪花下落的top值小鱼屏幕的可视区域高时执行下列
        if (speed < document.documentElement.clientHeight) {
          o.style.top = speed + 'px'
          o.style.left = startPosLeft + Math.ceil(Math.random() * 8) + 'px'
          speed += 10
        }
        else {
          o.style.display = 'none'
        }
      }, 80);
    }

    const snow = document.querySelector('#snow')

    /*使用setInterval定时器每400毫秒创建一个雪花*/
    setInterval(function () {
      const odiv = document.createElement('div')  //创建div
      odiv.innerHTML = "✽"   //div的内容  想不到吧，原来雪花是个符号，一切都是那么简单，嘎嘎
      odiv.style.position = 'absolute'  //div的绝对定位
      snow.appendChild(odiv);  //把创建好的div放进snow中
      const obj = new Obj()   //实例化
      obj.draw(odiv)  //调用obj的draw方法
    }, 400)

  </script>
</body>

</html>